// /**
// //  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
//  *
//  * @category    design
//  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
//  * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
//  */

.main-navigation(
    @_nav-bg: @navigation-background,
    @_nav-border: @navigation-border,
    @_nav-level0-font-size: @navigation-level0-font-size,
    @_nav-level0-font-weight: @navigation-level0-font-weight,
    @_nav-level0-item-line-height: @navigation-level0-item-line-height,
    @_nav-level0-item-margin: @navigation-level0-item-margin,
    @_nav-level0-item-padding: @navigation-level0-item-padding,
    @_nav-level0-text-transform: @navigation-level0-text-transform,

    @_nav-level0-item-bg: @navigation-level0-item-background,
    @_nav-level0-item-border: @navigation-level0-item-border,
    @_nav-level0-item-color: @navigation-level0-item-color,
    @_nav-level0-item-text-decoration: @navigation-level0-item-text-decoration,

    @_nav-level0-item-bg-active: @navigation-level0-item-background-active,
    @_nav-level0-item-border-active: @navigation-level0-item-border-active,
    @_nav-level0-item-color-active: @navigation-level0-item-color-active,
    @_nav-level0-item-text-decoration-active: @navigation-level0-item-text-decoration-active,

    @_submenu-bg: @submenu-background,
    @_submenu-border: @submenu-border,
    @_submenu-padding: @submenu-padding,
    @_submenu-font-size: @submenu-font-size,
    @_submenu-font-weight: @submenu-font-weight,
    @_submenu-item-padding: @submenu-item-padding,

    @_submenu-item-bg: @submenu-item-background,
    @_submenu-item-border: @submenu-item-border,
    @_submenu-item-color: @submenu-item-color,
    @_submenu-item-text-decoration: @submenu-item-text-decoration,

    @_submenu-item-bg-active: @submenu-item-background-active,
    @_submenu-item-border-active: @submenu-item-border-active,
    @_submenu-item-color-active: @submenu-item-color-active,
    @_submenu-item-text-decoration-active: @submenu-item-text-decoration-active
) {
    .navigation {
        .css(background, @_nav-bg);
        .css(border, @_nav-border);
        .box-sizing();
        ul {
            margin: 0;
            padding: 0;
        }
        a,
        a:hover {
            .css(color, @_nav-level0-item-color);
            .css(text-decoration, @_nav-level0-item-text-decoration);
        }
        .level0 {
            .font-size(@_nav-level0-font-size);
            .css(border-top, @_nav-level0-item-border);
            margin: 0;
            > .level-top {
                .css(background, @_nav-level0-item-bg);
                .css(font-weight, @_nav-level0-font-weight);
                .css(line-height, @_nav-level0-item-line-height);
                .css(padding, @_nav-level0-item-padding);
                .css(text-transform, @_nav-level0-text-transform);
                display: block;
            }
            &.active > a {
                .css(background, @_nav-level0-item-bg-active);
                .css(border, @_nav-level0-item-border-active);
                .css(color, @_nav-level0-item-color-active);
                .css(text-decoration, @_nav-level0-item-text-decoration-active);
            }
        }
        .ui-menu:not(:first-child) {
            .css(background, @_submenu-bg);
            .css(border, @_submenu-border);
            .css(font-size, @_submenu-font-size);
            .css(font-weight, @_submenu-font-weight);
            overflow-x: hidden;
            position: relative;
            .transition(left .3s ease-out 0);
            top: auto !important;
            left: auto !important;
            padding: 10px 20px;
            > ul {
                display: block;
                .css(padding, @_submenu-padding);
                > li {
                    margin: 0;
                    a {
                        .css(background, @_submenu-item-bg);
                        .css(border, @_submenu-item-border);
                        .css(color, @_submenu-item-color);
                        .css(text-decoration, @_submenu-item-text-decoration);
                        display: block;
                        line-height: normal;
                        .css(padding, @_submenu-item-padding);
                    }
                }
            }
            &.expanded {
              display: block !important;
              top: 0 !important;
            }
            .active > a {
                .css(background, @_submenu-item-bg-active);
                .css(border, @_submenu-item-border-active);
                .css(color, @_submenu-item-color-active);
                .css(text-decoration, @_submenu-item-text-decoration-active);
            }
        }
    }
}

//
//    Desktop
//--------------------------------------
.main-navigation-desktop(
    @_nav-bg: @navigation-desktop-background,
    @_nav-border: @navigation-desktop-border,
    @_nav-font-size: @navigation-desktop-font-size,
    @_nav-font-weight: @navigation-desktop-font-weight,

    @_nav-level0-item-line-height: @navigation-desktop-level0-item-line-height,
    @_nav-level0-item-margin: @navigation-desktop-level0-item-margin,
    @_nav-level0-item-padding: @navigation-desktop-level0-item-padding,

    @_nav-level0-item-bg: @navigation-desktop-level0-item-background,
    @_nav-level0-item-border: @navigation-desktop-level0-item-border,
    @_nav-level0-item-color: @navigation-desktop-level0-item-color,
    @_nav-level0-item-text-decoration: @navigation-desktop-level0-item-text-decoration,

    @_nav-level0-item-bg-hover: @navigation-desktop-level0-item-background-hover,
    @_nav-level0-item-border-hover: @navigation-desktop-level0-item-border-hover,
    @_nav-level0-item-color-hover: @navigation-desktop-level0-item-color-hover,
    @_nav-level0-item-text-decoration-hover: @navigation-desktop-level0-item-text-decoration-hover,

    @_nav-level0-item-bg-active: @navigation-desktop-level0-item-background-active,
    @_nav-level0-item-border-active: @navigation-desktop-level0-item-border-active,
    @_nav-level0-item-color-active: @navigation-desktop-level0-item-color-active,
    @_nav-level0-item-text-decoration-active: @navigation-desktop-level0-item-text-decoration-active,

    @_submenu-bg: @submenu-desktop-background,
    @_submenu-border-width: @submenu-desktop-border-width,
    @_submenu-border-style: @submenu-desktop-border-style,
    @_submenu-border-color: @submenu-desktop-border-color,
    @_submenu-box-shadow: @submenu-desktop-box-shadow,
    @_submenu-font-size: @submenu-desktop-font-size,
    @_submenu-font-weight: @submenu-desktop-font-weight,
    @_submenu-min-width: @submenu-desktop-min-width,
    @_submenu-padding: @submenu-desktop-padding,

    @_submenu-arrow: @submenu-desktop-arrow,
    @_submenu-arrow-size: @submenu-desktop-arrow-size,
    @_submenu-arrow-left: @submenu-desktop-arrow-left,

    @_submenu-item-padding: @submenu-desktop-item-padding,
    @_submenu-item-bg: @submenu-desktop-item-background,
    @_submenu-item-border: @submenu-desktop-item-border,
    @_submenu-item-color: @submenu-desktop-item-color,
    @_submenu-item-text-decoration: @submenu-desktop-item-text-decoration,

    @_submenu-item-bg-hover: @submenu-desktop-item-background-hover,
    @_submenu-item-border-hover: @submenu-desktop-item-border-hover,
    @_submenu-item-color-hover: @submenu-desktop-item-color-hover,
    @_submenu-item-text-decoration-hover: @submenu-desktop-item-text-decoration-hover,

    @_submenu-item-bg-active: @submenu-desktop-item-background-active,
    @_submenu-item-border-active: @submenu-desktop-item-border-active,
    @_submenu-item-color-active: @submenu-desktop-item-color-active,
    @_submenu-item-text-decoration-active: @submenu-desktop-item-text-decoration-active
) {

    .navigation {
        .css(background, @_nav-bg);
        .css(border, @_nav-border);
        .css(font-size, @_nav-font-size);
        .css(font-weight, @_nav-font-weight);
        height: inherit;
        left: auto;
        overflow: inherit;
        position: relative;
        top: 0;
        width: 100%;
        z-index: 3;
        padding: 0;
        &:empty {
            display: none;
        }
        ul {
            margin-top: 0;
            margin-bottom: 0;
            padding: 0;
            position: relative;
        }
        li.level0 {
            .css(border-top, none);
        }
        .level0 {
            display: inline-block;
            position: relative;
            .css(margin, @_nav-level0-item-margin);

            &:last-child {
                margin-right: 0;
                padding-right: 0;
            }
            > .level-top {
                .box-sizing();
                .css(background, @_nav-level0-item-bg);
                .css(border, @_nav-level0-item-border);
                .css(color, @_nav-level0-item-color);
                .css(line-height, @_nav-level0-item-line-height);
                .css(padding, @_nav-level0-item-padding);
                .css(text-decoration, @_nav-level0-item-text-decoration);
                position: relative;
                &:hover, &.ui-state-focus {
                    .css(background, @_nav-level0-item-bg-hover);
                    .css(border, @_nav-level0-item-border-hover);
                    .css(color, @_nav-level0-item-color-hover);
                    .css(text-decoration, @_nav-level0-item-text-decoration-hover);
                }
            }
            &.active {
                > .level-top {
                    .css(background, @_nav-level0-item-bg-active);
                    .css(border, @_nav-level0-item-border-active);
                    .css(color, @_nav-level0-item-color-active);
                    .css(text-decoration, @_nav-level0-item-text-decoration-active);
                }
            }
            &.parent:hover > .submenu {
                overflow: visible !important;
            }
            .ui-menu {
                .css(font-size, @_submenu-font-size);
                .css(font-weight, @_submenu-font-weight);
                left: 0;
                .css(min-width, @_submenu-min-width);
                position: absolute;
                padding: 0;
                margin: 0 !important;
                top: 100%;
                z-index: 1;
                .css(background, @_submenu-bg);
                .css(border, @_submenu-border-width @_submenu-border-style @_submenu-border-color);
                .css(box-shadow, @_submenu-box-shadow);
                .css(padding, @_submenu-padding);
                ._submenu-arrow(
                    @_submenu-arrow,
                    @_bg: @_submenu-bg,
                    @_border: @_submenu-border-color,
                    @_size: @_submenu-arrow-size,
                    @_left: @_submenu-arrow-left
                );
                a {
                    display: block;
                    line-height: inherit;
                    .css(background, @_submenu-item-bg);
                    .css(border, @_submenu-item-border);
                    .css(color, @_submenu-item-color);
                    .css(padding, @_submenu-item-padding);
                    .css(text-decoration, @_submenu-item-text-decoration);
                    &:hover, &.ui-state-focus {
                        .css(background, @_submenu-item-bg-hover);
                        .css(border, @_submenu-item-border-hover);
                        .css(color, @_submenu-item-color-hover);
                        .css(text-decoration, @_submenu-item-text-decoration-hover);
                    }
                }
                .active > a {
                    .css(background, @_submenu-item-bg-active);
                    .css(border, @_submenu-item-border-active);
                    .css(color, @_submenu-item-color-active);
                    .css(text-decoration, @_submenu-item-text-decoration-active);
                }
                .ui-menu {
                    top: 0 !important;
                    left: 100%!important;
                }
            }
            &.more {
                position: relative;
                .icon-font(
                    @icon-pointer-down,
                    @_icon-font-size: 26px,
                    @_icon-font-position: after
                );
                &:before {
                    display: none;
                }
                &:after {
                    cursor: pointer;
                    padding: 8px 12px;
                    position: relative;
                    z-index: 1;
                }
                &:hover > .submenu {
                    overflow: visible !important;
                }
                li {
                    display: block;
                }
            }
        }
    }
}

//  Submenu arrow
._submenu-arrow(
    @_submenu-arrow,
    @_bg,
    @_border,
    @_size,
    @_left
) when (@_submenu-arrow = true) {
    & when (iscolor(@_bg)) and (iscolor(@_border)) {
        @_outer-size: @_size + 1;
        @_outer-left: @_left - 1;
        margin-top: -@_outer-size;
        > ul {
            margin-top: @_outer-size;
            &:before,
            &:after {
                content: '';
                overflow: hidden;
                display: block;
                position: absolute;
            }
            &:before {
                left: @_left;
                color: @_bg;
                z-index: 4;
                .arrow(up, @_size, @_bg);
                top: -@_size*2;
            }
            &:after {
                left: @_outer-left;
                color: @_border;
                z-index: 3;
                .arrow(up, @_outer-size, @_border);
                top: -@_outer-size*2;
            }
        }
    }
    & when (iscolor(@_bg)) and not (iscolor(@_border)) {
        margin-top: -@_size;
        > ul {
            margin-top: @_size;
            &:before{
                color: @_bg;
                content: '';
                display: block;
                overflow: hidden;
                position: absolute;
                top: -@_size*2;
                left: @_left;
                z-index: 4;
                .arrow(up, @_size, @_bg);
            }
        }
    }
    & when (iscolor(@_border)) and not (iscolor(@_bg)) {
        margin-top: -@_size;
        > ul {
            margin-top: @_size;
            &:before{
                color: @_border;
                content: '';
                display: block;
                overflow: hidden;
                position: absolute;
                top: -@_size*2;
                left: @_left;
                z-index: 4;
                .arrow(up, @_size, @_border);
            }
        }
    }
}
